<template>
  <div>
    <el-card>
      <el-form :model="form" size="mini" label-position="top" ref="form">
        <el-row :gutter="10">
          <el-col :lg="4" :md="6">
            <el-form-item label="开始日期" prop="STARTDAY">
              <el-date-picker size="mini" style="width:100%;" v-model="form.STARTDAY" type="date"
                value-format="yyyyMMdd" placeholder="开始日期" :picker-options="pickerOptionsStart" @change="changeStart">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :lg="4" :md="6">
            <el-form-item label="结束日期" prop="ENDDAY">
              <el-date-picker style="width:100%;" size="mini" v-model="form.ENDDAY" type="date" value-format="yyyyMMdd"
                placeholder="结束日期" :picker-options="pickerOptionsEnd" @change="changeEnd">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :lg="4" :md="6">
            <el-form-item label="星期" prop="WEEKDAY">
              <el-select size="mini" v-model="form.WEEKDAY" @change="queryDate" placeholder="请选择星期"
                style="width:100%;">
                <el-option v-for="item in weekList" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :lg="4" :md="6">
            <el-form-item label="是否节假日" prop="ISHOLIDAY">
              <el-select size="mini" clearable v-model="form.ISHOLIDAY" @change="queryDate" placeholder="请选择是否节假日"
                style="width:100%;">
                <el-option v-for="item in holidayOption" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :lg="4" :md="6">
            <el-form-item label="是否高峰日" prop="ISPEAKDAY">
              <el-select size="mini" clearable v-model="form.ISPEAKDAY" @change="queryDate" placeholder="请选择是否高峰日"
                style="width:100%;">
                <el-option v-for="item in ISPEAKDAYOption" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <!-- <el-col :lg="4" :md="6">
            <el-form-item label="数据是否有效" prop="ISVALID">
              <el-select size="mini" clearable v-model="form.ISVALID" @change="queryDate" placeholder="请选择数据是否有效"
                style="width:100%;">
                <el-option v-for="item in valueOption" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col> -->
          
          <el-col :lg='24' :md='12' style="margin-top:8px;">
            <el-button type="primary" icon="el-icon-search" size='mini' @click="queryDate">查询
            </el-button>
            <el-button type="warning" size="mini" icon="el-icon-refresh" @click="resetForm('form')">重置</el-button>
            <el-button type="success" size="mini" icon="el-icon-plus" @click="openDialog('add','')">新增日期属性</el-button>
            <el-button type="success" size="mini" icon="el-icon-upload2" @click="openInsert">导入日期属性</el-button>
          </el-col>
        </el-row>
      </el-form>
      <br />
      <el-row>
        <el-table :data="tableData">
         <el-table-column prop="DAY" label="日期" align="center" width="120"></el-table-column>
          <el-table-column prop="WEEKDAY" label="星期" :formatter="dataFormat" align="center" ></el-table-column>
          <el-table-column prop="ISHOLIDAY" label="是否节假日" :formatter="dataFormat" align="center" ></el-table-column>
          <el-table-column prop="ISPEAKDAY" label="是否高峰日" :formatter="dataFormat" align="center" ></el-table-column>
          <!-- <el-table-column prop="ISVALID" label="数据是否有效日" :formatter="dataFormat" align="center" ></el-table-column> -->
          <el-table-column prop="CRTDATETIME" label="创建时间" align="center" ></el-table-column>
          <el-table-column prop="ALTDATETIME" label="修改时间" align="center" ></el-table-column>
          <el-table-column prop="OPERATOR" label="操作人" align="center" ></el-table-column>
          <el-table-column prop="OPERATOR" label="操作" align="center" >
            <template slot-scope="scope">
              <div>
                <el-button size="mini" type="warning" @click="openDialog('update',scope.row)">修改</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <div style="text-align:right;margin-top:20px;" v-show="this.tableData">
        <el-pagination style="text-align: right; margin-top:20px;" 
          :page-sizes="[10, 20, 50, 100]" 
          :page-size="pageSize" 
          @size-change="handleInSizeChange" 
          @current-change="handleInCurrentChange" 
          :current-page="currentPage" 
          background layout="sizes, total, prev, pager, next, jumper" 
          :total="tableTotal">
        </el-pagination>
      </div>
      </el-row>
    </el-card>
        <component :is="dialogList.editDialog" :option="editOptions" @refreshTable="queryDate"></component>
          <component :is="dialogList.excelToJson" :option="dialogExcelOptions" @ListenSuccess="queryDate"></component>

  </div>
</template>

<script>
 
  import request from "@/common/utils/requestWFM";
  import moment from 'moment';
  import toolBox from '@/common/utils/toolBox'
  import query from '@/message/wfm/FTEForecast/dateManage/dateQuery'
  import editDialog from "./dialog/editDialog";
  import excelToJson from "./dialog/excelToJson";

  export default {
    
    filters:{
      timeFormat(val){
        if(val == ''){
          return ''
        }
        return toolBox.timeFormat(val)
      },
    },
    data() {
      return {
        dialogExcelOptions:{
          isShow: false,
        },
        dialogList: {
          editDialog,
          excelToJson
        },
        editOptions: {
          isShow: false,
          title: '',
          row: {},
          flag: ''
        },
        tableTotal: 1,
        currentPage: 1,
        pageSize: 10,
        pickerOptionsStart: {
          disabledDate: (time) => {
            // return time.getTime() > Date.now()
          }
        },
        pickerOptionsEnd: {
          disabledDate: (time) => {
            // return time.getTime() > Date.now()
          }
        },
        form: { //表单数据
          STARTDAY: this.getDay(-30),
          ENDDAY: this.getDay(0),
          BATCHSERIALNO: '',
          WEEKDAY: '',
          ISHOLIDAY: '',
          ISPEAKDAY: '',
          // ISVALID: '',
        },
        tableData: [],
        weekList: [{
            label: '周一',
            value: '1'
          },
          {
            label: '周二',
            value: '2'
          },
          {
            label: '周三',
            value: '3'
          },
          {
            label: '周四',
            value: '4'
          },
          {
            label: '周五',
            value: '5'
          },
          {
            label: '周六',
            value: '6'
          },
          {
            label: '周日',
            value: '7'
          },
        ],
        holidayOption: [
          {
            label: '节假日',
            value: 'Y'
          },
          {
            label: '非节假日',
            value: 'N',
          }
        ],
        ISPEAKDAYOption: [
          {
            label: '高峰日',
            value: 'Y'
          },
          {
            label: '非高峰日',
            value: 'N',
          }
        ],
        valueOption: [
          {
            label: '有效',
            value: 'Y'
          },
          {
            label: '无效',
            value: 'N',
          }
        ],
      }
    },
    created(){
    },
    mounted() {
      // 查询原始数据
      this.queryDate();
    },
    methods: {
      openDialog(flag,data){
         this.editOptions.flag  = flag
        if(flag=='add'){
          this.editOptions.title = '新增日期属性'
          
        }else{
          this.editOptions.title = '修改日期属性'
          this.editOptions.row = data
        }
        this.editOptions.isShow = true 
      },
      // 打开导入日期
      openInsert(){
        this.dialogExcelOptions.isShow = true;
      },
      findName(arr,val){
        let data = arr.filter(item=>{
          return item.value == val
        })
        if(data.length)
        return data[0].value+' - '+data[0].label
      },
      dataFormat(row, column) {
        //枚举设备形式
        if (column.property == "WEEKDAY")
          return this.findName(this.weekList,row[column.property]);
        if (column.property == "ISHOLIDAY")
          return this.findName(this.holidayOption,row[column.property]);
        if (column.property == "ISPEAKDAY")
          return this.findName(this.ISPEAKDAYOption,row[column.property]);
        // if (column.property == "ISVALID")
        //   return this.findName(this.valueOption,row[column.property]);
      },
      // 获取当天前一天
      getDay(day) {
        var dd = new Date();
        dd.setDate(dd.getDate() + day);
        var y = dd.getFullYear();
        var m = dd.getMonth() + 1 < 10 ? "0" + (dd.getMonth() + 1) : dd.getMonth() + 1;
        var d = dd.getDate() < 10 ? "0" + dd.getDate() : dd.getDate();
        return y + "" + m + "" + d;
      },
       //前端分页
      handleInCurrentChange(val) {
        this.currentPage = val;
        this.queryDate();
      },
      handleInSizeChange(val) {
        this.pageSize = val;
        this.queryDate();
      },
      getBranch(data) {
        this.form.branch.BRANCHNO = data.BRANCHNO
        this.form.branch.BRANCHNAME = data.BRANCHNAME
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      changeStart() {
        this.pickerOptionsEnd = Object.assign({}, this.pickerOptionsEnd, {
          disabledDate: (time) => {
            if (this.form.STARTDAY) {
              return time.getTime() < Date.parse(this.form.STARTDAY.slice(0, 4) + '-' + this.form
                .STARTDAY.slice(4, 6) +
                '-' + this.form.STARTDAY.slice(6, 8)) - 8.64e7
            } else {
              // return time.getTime() < Date.now();
            }
          }
        })
      },
      changeEnd() {
        this.pickerOptionsStart = Object.assign({}, this.pickerOptionsStart, {
          disabledDate: (time) => {
            if (this.form.ENDDAY) {
              return time.getTime() > Date.parse(this.form.ENDDAY.slice(0, 4) + '-' + this.form
                .ENDDAY
                .slice(4, 6) + '-' +
                this.form.ENDDAY.slice(6, 8)) 
            } else {
              // return time.getTime() > Date.now();
            }
          }
        })
      },
      // 查询原始数据
      async queryDate() {
        let resBody = new query();
        resBody.data.STARTDAY = this.form.STARTDAY;
        resBody.data.ENDDAY = this.form.ENDDAY;
        resBody.data.WEEKDAY = this.form.WEEKDAY;
        resBody.data.ISHOLIDAY = this.form.ISHOLIDAY;
        resBody.data.ISPEAKDAY = this.form.ISPEAKDAY;
        // resBody.data.ISVALID = this.form.ISVALID;
        resBody.data.CurrPage = this.currentPage
        resBody.data.PageRowNum = this.pageSize
        let response = await request(resBody);
        if (response.SYS_HEAD.ReturnCode == '000000') {
          this.tableData = response.BODY.struct
          this.tableTotal = response.BODY.TotalRowNum              
        }else {
          this.$message({
            type: "error",
            message: "请求失败，错误码:" + response.SYS_HEAD.ReturnCode + "，错误信息：" + response.SYS_HEAD.ReturnMessage
          })
        }
      },
    }
  }

</script>

<style lang='scss' scoped>

</style>
